<template>
  <div class="country-list">
    <div v-for="(item, index) in salesData" :key="index" class="country-item">
      <div class="country-flag" :style="flagStyle(item.color)">
        <i :class="item.icon"></i>
      </div>
      <div class="country-info">
        <div class="country-name">{{ item.country }}</div>
        <div class="country-revenue">{{ formatCurrency(item.revenue) }}</div>
      </div>
      <div
        class="country-change"
        :class="item.change > 0 ? 'positive' : 'negative'"
      >
        {{ item.change > 0 ? "+" : "" }}{{ item.change }}%
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CountrySalesList",
  props: {
    salesData: {
      type: Array,
      default: () => [
        {
          country: "United States",
          revenue: 8567,
          change: 15.2,
          color: "var(--v-theme)",
          icon: "iconfont icon-bangsi",
        },
        {
          country: "Brazil",
          revenue: 2415,
          change: -24.5,
          color: "#28C76F",
          icon: "iconfont icon-bangsi",
        },
        {
          country: "India",
          revenue: 865,
          change: -12.2,
          color: "#FF9F43",
          icon: "iconfont icon-bangsi",
        },
        {
          country: "Australia",
          revenue: 745,
          change: 12.8,
          color: "#00CFE8",
          icon: "iconfont icon-bangsi",
        },
        {
          country: "France",
          revenue: 980,
          change: 8.3,
          color: "#EA5455",
          icon: "iconfont icon-bangsi",
        },
      ],
    },
  },
  methods: {
    formatCurrency(value) {
      return `$${(value / 1000).toFixed(1)}k`;
    },
    flagStyle(color) {
      return {
        backgroundColor: `${color}30`,
        color: color,
      };
    },
  },
};
</script>

<style scoped>
.country-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}

.country-item {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.country-item:hover {
  transform: translateX(5px);
}

.country-flag {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 15px;
}

.country-info {
  flex: 1;
  min-width: 0;
}

.country-name {
  font-weight: 600;
  color: var(--v-text-darker);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-revenue {
  font-size: 14px;
  color: var(--v-text);
}

.country-change {
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
  white-space: nowrap;
}

.positive {
  color: #28c76f;
}

.negative {
  color: #ea5455;
}
</style>
